import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
// 导入actionCreate
import { increment, decrement, setNumber } from "./store/modules/counterStore";
import { fetchChannel } from "./store/modules/channelStore";
function App() {
  //提交actions方法
  const dispatch = useDispatch();
  // 将store中的数据映射到组件中
  const { count } = useSelector((state) => state.counter);
  const { channelList } = useSelector((state) => state.channel);
  useEffect(() => {
    dispatch(fetchChannel());
  }, [dispatch]);
  return (
    <div className="App">
      <button onClick={() => dispatch(decrement())}>-</button>
      {count}
      <button
        onClick={() => {
          dispatch(increment());
        }}
      >
        +
      </button>
      <button onClick={() => dispatch(setNumber(10))}>set number</button>
      {/* <button onClick={() => dispatch(fetchChannel())}>fetchChannel</button> */}
      <ul>
        {channelList.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
